<template>
  <el-card class="box-card" style="margin-bottom: 10px">
    <CategorySelector></CategorySelector>
  </el-card>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-button type="primary" :icon="Plus">添加SPU</el-button>
      </div>
    </template>
    <!-- <el-table
      v-loading="loading"
      :data="attrList"
      border
      style="margin-top: 10px"
    ></el-table> -->
    <el-table border style="width: 100%">
      <el-table-column
        prop="date"
        label="序号"
        type="index"
        align="center"
        width="80"
      />
      <el-table-column prop="attrName" label="SPU名称" width="180" />
      <el-table-column label="SPU描述">
        <template v-slot="{ row }">
          <el-tag
            v-for="attrValue in row.attrValueList"
            :key="attrValue.id"
            style="margin-right: 8px"
            >{{ attrValue.valueName }}</el-tag
          >
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template #default="{ row, $index }">
          <el-button size="small" type="warning" :icon="Edit" />
          <el-popconfirm title="确定要删除此条属性吗?">
            <template #reference>
              <el-button size="small" type="danger" :icon="Delete" />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- <el-popconfirm title="请选择分类">
      <template #reference>
        <el-button>Delete</el-button>
      </template>
    </el-popconfirm> -->
  </el-card>
</template>

<script lang="ts">
import CategorySelector from '@/components/CategorySelector/index.vue'
export default {
  name: 'Spu',
  components: { CategorySelector },
}
</script>
<script setup lang="ts">
import { Plus, Edit, Delete } from '@element-plus/icons-vue'
</script>

<style></style>
